<template>
	<view>
		<uni-popup ref="popup">
			<view class="gl-container" style="width: 80vw;height: 70vh;background-color: #f1f1f1;">
				<view class="gl-header">
					<view class="gl-header-left">
						<text>{{curProduct.name}}</text>
					</view>
					<view class="gl-header-right">
						<uni-icons type="closeempty" size="16" color="#fff" class="gl-button-icon" @tap="close"
							style="background-color: #dd524d;padding: 2px;border-radius: 2px;"></uni-icons>
					</view>
				</view>

				<view class="gl-body" style="display: flex;flex-direction: column;gap: 10px;">
					<view>
						<uni-segmented-control :current="currentControl" :values="menuData"
							@clickItem="currentControlChange"></uni-segmented-control>
						<productBaseCard v-if="currentControl === 0" :data="curProduct"></productBaseCard>
						<productPriceCard v-if="currentControl === 1" :data="curProduct.price" :pid="curProduct?.pid"
							:gid="curProduct?.id" :money="curProduct.cur_price" @reload="refresh">
						</productPriceCard>
						<productTextCard v-if="currentControl === 2" :depict="curProduct?.jingle" @reload="refresh">
						</productTextCard>
						<productArgsCard v-if="currentControl === 3" :data="curProduct?.args" :pid="curProduct?.pid"
							:gid="curProduct?.id" @reload="refresh"></productArgsCard>
						<productTagsCard v-if="currentControl === 4" :data="curProduct?.tag" :pid="curProduct?.pid"
							:gid="curProduct?.id" @reload="refresh"></productTagsCard>
						<productPicsCard v-if="currentControl === 5" :data="curProduct?.all_media"
							:pid="curProduct?.pid" :gid="curProduct?.id" @reload="refresh"></productPicsCard>
						<productSkuCard v-if="currentControl === 6" :data="curProduct?.specs" :pid="curProduct?.pid"
							:gid="curProduct?.id" @reload="refresh"></productSkuCard>
						<view v-if="currentControl === 7" class="gl-empty-view"><text>功能开发中</text> </view>
						<view v-if="currentControl === 8" class="gl-empty-view"><text>功能开发中</text> </view>
						<view v-if="currentControl === 9" class="gl-empty-view"><text>功能开发中</text> </view>
					</view>
				</view>
				<view class="gl-footer"></view>
				<!-- 产品封面上传 -->
				<cos-multiple-post ref="cosCover" :host="sConf.host" :token="sConf.auth.token" path="product" onHide
					once @upFinish="EventFinish"></cos-multiple-post>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import models from '@/common/model.json';
	import productBaseCard from '@/components/sub-product/base-card.vue'
	import productPriceCard from '@/components/sub-product/price-card.vue'
	import productTextCard from '@/components/sub-product/docs-card.vue'
	import productArgsCard from '@/components/sub-product/args-card.vue'
	import productTagsCard from '@/components/sub-product/tags-card.vue'
	import productPicsCard from '@/components/sub-product/image-card.vue'
	import productSkuCard from '@/components/sub-product/sku-card.vue'
	export default {
		data() {
			return {
				menuData: ['综合', '价格', '文案', '参数', '标签', '图库', '规格', '组合', '评论', '其他'],
				sConf: getApp().globalData,
				currentControl: 0, // 页面分段器索引	
				showCard: true, // 显示卡片
				isSubmit: false, // 是否变更	
				minModeData: [], // 小类
				maxModeData: [], // 大类	
				placeData: [], // 商户
				oldProduct: this.productMdb,
				curProduct: this.productMdb
			}
		},
		mounted() {
			// console.log('__init__', this.data);
			// this.loadDefData(this.data.product)
			// if (this.data) {
			// 	this.oldProduct = JSON.parse(JSON.stringify(this.data.product))
			// 	this.curProduct = JSON.parse(JSON.stringify(this.data.product))
			// }
		},
		props: {
			productMdb: {
				type: Object,
				default: () => JSON.parse(JSON.stringify(models.product))
			},
			data: {
				type: Object,
				default: null
			}
		},
		components: {
			productBaseCard,
			productPriceCard,
			productTextCard,
			productArgsCard,
			productTagsCard,
			productPicsCard,
			productSkuCard
		},
		methods: {
			open(e) {
				console.log('open', e);
				this.oldProduct = JSON.parse(JSON.stringify(e))
				this.curProduct = JSON.parse(JSON.stringify(e))
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			refresh() {
				this.$emit('refresh')
			},




			loadDefData(e) {
				console.log('loadDefData', e);
				// 加载大类		
				this.loadModeList(0);
				// 加载商户
				this.loadPlaceList();
				if (e) {
					// 加载小类
					this.loadModeList(e.modep);
					this.oldProduct = JSON.parse(JSON.stringify(e))
					this.curProduct = JSON.parse(JSON.stringify(e))
				} else {
					this.oldProduct = JSON.parse(JSON.stringify(this.productMdb))
					this.curProduct = JSON.parse(JSON.stringify(this.productMdb))
				}


			},
			lastSwiper() {
				this.$emit('navPage');
			},
			refresh() {
				console.log('刷新');
				uni.showLoading({
					title: '加载中'
				});
				this.loadPriductRead(this.curProduct.id);
				setTimeout(() => {
					uni.hideLoading();
				}, 1000);
			},
			/**
			 * 切换分页
			 */
			currentControlChange(e) {
				console.log('currentControlChange', e);
				this.currentControl = e.currentIndex;
				// if(e === 0){
				// 	this.$refs.textCard.loadDefData()
				// }
			},
			/**
			 * 大类改变
			 */
			maxModeChange(e) {
				console.log('maxModeChange', e);
				this.curProduct.mode = null;
				this.loadModeList(e);
			},
			minModeChange(e) {
				console.log('minModeChange', e);
			},
			EventCheckbox(e) {
				console.log('EventCheckbox', e.detail.value);
				let that = this;
				[
					"is_money",
					"is_card",
					"is_points",
					"status",
					"is_list",
					"is_share"
				].forEach(key => {
					that.curProduct[key] = 0
				})
				e.detail.value.forEach(key => {
					that.curProduct[key] = 1
				})
			},
			EventSubmit() {
				console.log('EventSubmit');
				if (!this.curProduct.name || this.curProduct.name.length < 1) {
					uni.showToast({
						title: '名称不能为空'
					})
					return
				}
				if (!this.curProduct.mode) {
					uni.showToast({
						title: '选择商品小类'
					})
					return
				}
				if (!this.curProduct.pid) {
					uni.showToast({
						title: '选择商户'
					})
					return
				}
				if (!this.curProduct.id) {
					console.log('new');
					this.loadPriductPost()
				} else {
					console.log('put');
					this.loadPriductPatch()
				}
			},
			EventCancel() {
				console.log('EventCancel');
				this.curProduct = JSON.parse(JSON.stringify(this.oldProduct));
			},
			EventFinish(e) {
				console.log('EventFinish', e);
				this.curProduct.face = e[0];
			},
			changeCover() {
				this.$refs.cosCover.open()
			},
			async loadModeList(e) {
				let host = this.sConf.host + '/admin/cargoMode/';
				let token = this.sConf.auth.token || '';
				let data = {
					ordering: '-hot',
					parent: e
				}
				let res = await psMethod.authenticatorGetSync(host, token, data)
				if (res.rescode === 200) {
					let tmpData = []
					res.resmsg.forEach(item => {
						tmpData.push({
							value: item.id,
							text: item.name
						})
					})
					if (e > 0) {
						this.minModeData = tmpData;
					} else {
						this.maxModeData = tmpData;
					}
				}
			},
			async loadPlaceList() {
				let host = this.sConf.host + '/admin/placeList/';
				let token = this.sConf.auth.token || '';
				let data = {
					ordering: "-id"
				}
				let res = await psMethod.authenticatorGetSync(host, token, data)
				if (res.rescode === 200) {
					let tmpData = []
					res.resmsg.forEach(item => {
						tmpData.push({
							value: item.id,
							text: item.nicename
						})
					})
					this.placeData = tmpData;
				}
			},
			async loadPriductRead(e) {
				let host = this.sConf.host + '/admin/cargoList/' + e + '/';
				let token = this.sConf.auth.token || '';
				let res = await psMethod.authenticatorGetSync(host, token)
				if (res.rescode === 200) {
					this.curProduct = JSON.parse(JSON.stringify(res.resmsg))
					this.oldProduct = JSON.parse(JSON.stringify(res.resmsg))
				}
			},
			async loadPriductPost() {
				let host = this.sConf.host + '/admin/cargoBase/';
				let token = this.sConf.auth.token || '';
				let data = psMethod.cutNull(this.curProduct)
				let res = await psMethod.authenticatorPostSync(host, token, data)
				console.log('创建商品', res);
				if (res.rescode === 200) {
					this.curProduct = JSON.parse(JSON.stringify(res.resmsg))
					this.oldProduct = JSON.parse(JSON.stringify(res.resmsg))
					uni.showToast({
						title: '提交商品成功'
					})
				} else {
					uni.showModal({
						title: '失败',
						content: '创建商品失败',
						showCancel: false
					})
				}
			},
			async loadPriductPatch() {
				let host = this.sConf.host + '/admin/cargoBase/' + this.curProduct.id + '/';
				let token = this.sConf.auth.token || '';
				let data = psMethod.cutNull(this.curProduct)
				let res = await psMethod.authenticatorPatchSync(host, token, data)
				if (res.rescode === 200) {
					this.curProduct = JSON.parse(JSON.stringify(res.resmsg))
					this.oldProduct = JSON.parse(JSON.stringify(res.resmsg))
					uni.showToast({
						title: '提交商品成功'
					})
				} else {
					uni.showModal({
						title: '失败',
						content: '创建商品失败',
						showCancel: false
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.emptyView {
		padding: 40px;
		font-size: x-large;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>